<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 树形结构组件 -->
        <treeLayout
          :departs="company"
          :is-type="false"
          @addDepart="departShowFn"
        />
        <!-- 树形结构组件 -->
        <el-divider />

        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
          @node-click="handleNodeClick"
        >
          <!-- 树形结构组件 -->
          <treeLayout
            slot-scope="{ data }"
            style="width: 100%"
            :departs="data"
            @delDepart="getDepartmentsFn"
            @addDepart="departShowFn"
          />
          <!-- 树形结构组件 -->
        </el-tree>
      </el-card>

      <!-- 添加部门弹出层 -->
      <addDepartment
        ref="popupRef"
        :dialog-visible="departShow"
        :click-obj="clickObj"
        @cancelPopup="cancelFn"
      />
      <!-- 添加部门弹出层 -->
    </div>
  </div>
</template>

<script>
import treeLayout from './components/treeLayout.vue'
import { getDepartments } from '@/api/departments'
import { transformTreeData } from '@/utils'
import addDepartment from './components/addDepartments.vue'

export default {
  components: {
    treeLayout,
    addDepartment
  },
  data() {
    return {
      // 公司名称数据
      company: {},
      // 组织架构数据
      departs: [],
      defaultProps: {
        label: 'name'
      },
      // 添加部门弹出层
      departShow: false,
      // 添加的部门传递过来的对象
      clickObj: {},
      loading: false
    }
  },
  created() {
    this.getDepartmentsFn()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    cancelFn() {
      this.departShow = false
      this.getDepartmentsFn()
    },
    // 获取所以组织架构部门详情
    async getDepartmentsFn() {
      this.loading = true
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      this.departs = transformTreeData(result.depts, '')
      this.loading = false
    },
    // 弹层触发函数
    departShowFn(obj, type) {
      this.clickObj = obj
      if (type === 'see') {
        this.$refs.popupRef.getUserInfoById(obj.id)
      }
      this.departShow = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>

